<template>
	<view class="login-box">
		<!-- 头部图标 -->
		<view class="title-box">
			<view class="img-box"><u--image :showLoading="true" :src="logoImg" shape="circle" width="85" height="85"></u--image></view>
			<view class="img-title">{{ imgTitle }}</view>
		</view>
		<!--  手机验证码登录 -->
		<view v-show="loginType === 1"><phoneLogin @otherLogin="otherLogin" @change="userLogin" /></view>
		<!--  微信一键登录 -->
		<view v-show="loginType === 2"><weichatLogin @otherLogin="otherLogin" @change="userLogin" /></view>
		<!-- 底部图片 -->
		<image class="bottom-img" :src="bottomImg" />
	</view>
</template>

<script>
import phoneLogin from './component/phoneLogin.vue';
import weichatLogin from './component/wechatLogin.vue';
export default {
	data() {
		return {
			logoImg: '/static/image/login/logo.png',
			bottomImg: 'http://saasyrzp.oss-cn-hangzhou.aliyuncs.com/images/5fb4c035-3636-4474-9fc8-72dd14d613f1bottom_logo.png',
			imgTitle: 'LOT充电', // 标题
			loginType: 1, // 1 手机验证码登录 2 微信一键登录 3 公司列表
			companyList: [], // 公司列表
			loginInfo: {} // 登录信息
		};
	},
	components: {
		phoneLogin,
		weichatLogin
	},
	onShow() {
		this.initWx();
	},
	methods: {
		// 选择登录的方式
		otherLogin(type) {
			this.loginType = type;
		},
		// 登录 通过用户的phone和公司id进行登录
		async userLogin(info) {
			// 获取登录信息的公司id
			const res = await this.$api.user.userLogin(info);
			this.$store.commit('editUserToken', res.data.token); // 缓存token
			const isUser = await this.getUserInfo();
			if (isUser) {
				uni.$u.toast('登录成功');
				setTimeout(() => {
					this.jumpPage();
				}, 500);
			} else {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/userInfo/userInfo'
					});
				}, 500);
				uni.$u.toast('请完善个人信息');
			}
		},
		// 通过token 获取用户详情
		// 当没有用户名称返回false
		async getUserInfo() {
			const res = await this.$api.user.getUserOne();
			// 当用户为空时跳转补充用户信息页面
			this.$store.commit('editUserInfo', res.data); // 缓存用户信息
			return res.data.username !== '';
		},
		// 通过code 换取 openid
		initWx() {
			const that = this;
			uni.login({
				provider: 'weixin',
				success: async res => {
					if (res.errMsg === 'login:ok') {
						const info = await that.$api.wechat.WXopenid({
							code: res.code,
							type: 2
						});
						if (info.data && info.data.errcode === 0) {
							that.$store.commit('editWxIdentifier', info.data);
						} else {
							uni.$u.toast(res.data.errmsg);
						}
					}
				}
			});
		},
		// 判断路由跳转  从其他页面调到登录页时返回其他页面  初始化条到首页
		jumpPage() {
			const pages = getCurrentPages(); //当前页
			const beforePage = pages[pages.length - 2]; //上个页面
			// 当有上一张页面时返回上一页 否则跳转到主页
			if (beforePage) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.login-box {
	.title-box {
		.img-box {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
		}

		text-align: center;

		.img-title {
			margin-top: 30rpx;
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}

	.bottom-img {
		width: 100%;
		position: fixed;
		height: 100rpx;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
</style>
